PlayerDetail.renderPlayerStats - Code Metrics - Inspection of "Player stats via PSD API." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/player-stats ( 57cce1 )

by Kevin Van

created 2021-03-15 12:12 UTC

PlayerDetail.renderPlayerStats B

↳ Parent: PlayerDetail

Complexity

Conditions

Size

Total Lines	56
Code Lines	51

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	51
dl	0
loc	56
rs	7.2036
c	0
b	0
f	0
cc	7

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"
import { mapPositionCode } from "../scripts/helper"

import "./player.scss"
import { Link } from "gatsby"

// eslint-disable-next-line
String.prototype.replaceAll = function (search, replacement) {
  var target = this
  return target.replace(new RegExp(search, "g"), replacement)
}

/**
 */
class PlayerDetail extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      config: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
      player: { field_vv_id: playerId },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.playerId = playerId
  }

  updateData() {
    if (this.matchId === null) {
      return
    }

    const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  renderPlayerName = (player) => (
    <h1 className={"player-detail__name"}>
      <span className={"player-detail__name-first"}>
        {player.field_firstname}
      </span>
      <span className={"player-detail__name-last"}>
        {player.field_lastname}
      </span>
    </h1>
  )
  renderPlayerImage = (player) => (
    <div className={"bg-green-mask"}>
      <div
        className={"player-detail__bg-avatar"}
        style={
          player.relationships.field_image && {
            backgroundImage: `url(${player.relationships.field_image.localFile.childImageSharp.fixed.src})`,
          }
        }
      />
      <div className={"bg-white-end"} />
    </div>
  )
  renderPlayerHeader = (player) => (
    <header className={"player-detail__header"}>
      {this.renderPlayerName(player)}
      {this.renderPlayerImage(player)}

      <div className={"player-detail__bg-shirt-number"} aria-hidden="true">
        {player.field_shirtnumber || ""}
      </div>
    </header>
  )
  renderPlayerStats = (player) => {
    if (this.state.loading === false && this.state.data) {
      const {
        playerStatistics = [],
        goals = [],
        gameReports = [],
      } = this.state.data

      return (
        <aside className={"player-detail__statistics"}>
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
              {playerStatistics[0]?.gamesPlayed || "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Wedstrijden
            </div>
          </section>

          {(player.field_position === "k" || player.field_position === "d") && (
            <section className={"player-detail__statistics-item"}>
              <div className={"player-detail__statistics-item__number"}>
                {playerStatistics[0]?.cleanSheets || "0"}
              </div>
              <div className={"player-detail__statistics-item__label"}>
                Cleansheets
              </div>
            </section>
          )}
          {player.field_position !== "k" && (
            <section className={"player-detail__statistics-item"}>
              <div className={"player-detail__statistics-item__number"}>
                {playerStatistics[0]?.goals || "0"}
              </div>
              <div className={"player-detail__statistics-item__label"}>
                Doelpunten
              </div>
            </section>
          )}
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
              {playerStatistics[0]?.yellowCards || "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Gele kaarten
            </div>
          </section>
          <section className={"player-detail__statistics-item"}>
            <div className={"player-detail__statistics-item__number"}>
              {playerStatistics[0]?.redCards|| "0"}
            </div>
            <div className={"player-detail__statistics-item__label"}>
              Rode kaarten
            </div>
          </section>
        </aside>
      )
    }
  }

  renderPlayerBirthdate = (player) => (
    <div
      className={"player-detail__data-item player-detail__data-item--birthdate"}
    >
      <span className={"player-detail__data-item__label"}>Geboortedatum</span>
      <span className={"player-detail__data-item__data"}>
        {player.field_birth_date || "Onbekend"}
      </span>
    </div>
  )
  renderPlayerPosition = (player) => (
    <div
      className={"player-detail__data-item player-detail__data-item--position"}
    >
      <span className={"player-detail__date-item__data"}>
        {player.field_position && mapPositionCode(player.field_position)}
      </span>
      <span className={"player-detail__data-item__label"}>
        {player.relationships.node__team && (
          <Link to={player.relationships.node__team[0].path.alias}>
            {player.relationships.node__team[0].title}
          </Link>
        )}
      </span>
    </div>
  )
  renderPlayerJoinDate = (player) => {
    const currentlyPlaying = !player.field_date_leave
    return (
      <div
        className={
          "player-detail__data-item player-detail__data-item--joindate"
        }
      >
        <span className={"player-detail__data-item__label"}>
          {currentlyPlaying && "Speler bij KCVV sinds"}
          {!currentlyPlaying && "Speler tussen"}
        </span>
        <span className={"player-detail__data-item__data"}>
          {player.field_join_date || "Onbekend"}
          {!currentlyPlaying && (
            <>
              <span className={"text--regular"}> en </span>{" "}
              {player.field_date_leave}
            </>
          )}
        </span>
      </div>
    )
  }
  renderPlayerData = (player) => (
    <section className={"player-detail__data"}>
      {this.renderPlayerBirthdate(player)}
      {this.renderPlayerPosition(player)}
      {this.renderPlayerJoinDate(player)}
    </section>
  )
  renderPlayerBody = (player) => {
    const cleanBody =
      (player.body &&
        player.body.processed.replaceAll(
          "/sites/default/",
          `${process.env.GATSBY_API_DOMAIN}/sites/default/`
        )) ||
      ""

    return (
      <section className={"player-detail__body"}>
        <div dangerouslySetInnerHTML={{ __html: cleanBody }} />
      </section>
    )
  }
  render() {
    const { player } = this.props

    return (
      <article className={"player-detail"}>
        {this.renderPlayerHeader(player)}
        {this.renderPlayerStats(player)}
        <div className={"player-break"}></div>
        {this.renderPlayerData(player)}
        {this.renderPlayerBody(player)} */}
      </article>
    )
  }
}

// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
const query = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`

export default ({ player }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <PlayerDetail
        // Data is the result of our query.
        config={data}
        player={player}
      />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			import { mapPositionCode } from "../scripts/helper"
4
5			import "./player.scss"
6			import { Link } from "gatsby"
7
8			// eslint-disable-next-line
9			String.prototype.replaceAll = function (search, replacement) {
10			var target = this
11			return target.replace(new RegExp(search, "g"), replacement)
12			}
13
14			/**
15			*/
16			class PlayerDetail extends Component {
17			constructor(props) {
18			super(props)
19
20			this.state = {
21			data: [],
22			loading: true,
23			}
24
25			const {
26			config: {
27			site: {
28			siteMetadata: { kcvvPsdApi },
29			},
30			},
31			player: { field_vv_id: playerId },
32			} = this.props
33
34			this.kcvvPsdApi = kcvvPsdApi
35			this.playerId = playerId
36			}
37
38			updateData() {
39			if (this.matchId === null) {
40			return
41			}
42
43			const apiUrl = `${this.kcvvPsdApi}/stats/player/${this.playerId}`
44
45			fetch(apiUrl)
46			.then((response) => response.json())
47			.then((json) => this.setState({ data: json, loading: false }))
48			}
49
50			componentDidMount() {
51			this.updateData()
52			}
53
54			renderPlayerName = (player) => (
55			<h1 className={"player-detail__name"}>
56			<span className={"player-detail__name-first"}>
57			{player.field_firstname}
58			</span>
59			<span className={"player-detail__name-last"}>
60			{player.field_lastname}
61			</span>
62			</h1>
63			)
64			renderPlayerImage = (player) => (
65			<div className={"bg-green-mask"}>
66			<div
67			className={"player-detail__bg-avatar"}
68			style={
69			player.relationships.field_image && {
70			backgroundImage: `url(${player.relationships.field_image.localFile.childImageSharp.fixed.src})`,
71			}
72			}
73			/>
74			<div className={"bg-white-end"} />
75			</div>
76			)
77			renderPlayerHeader = (player) => (
78			<header className={"player-detail__header"}>
79			{this.renderPlayerName(player)}
80			{this.renderPlayerImage(player)}
81
82			<div className={"player-detail__bg-shirt-number"} aria-hidden="true">
83			{player.field_shirtnumber \|\| ""}
84			</div>
85			</header>
86			)
87			renderPlayerStats = (player) => {
88			if (this.state.loading === false && this.state.data) {
89			const {
90			playerStatistics = [],
91			goals = [],
92			gameReports = [],
93			} = this.state.data
94
95			return (
96			<aside className={"player-detail__statistics"}>
97			<section className={"player-detail__statistics-item"}>
98			<div className={"player-detail__statistics-item__number"}>
99			{playerStatistics[0]?.gamesPlayed \|\| "0"}
100			</div>
101			<div className={"player-detail__statistics-item__label"}>
102			Wedstrijden
103			</div>
104			</section>
105
106			{(player.field_position === "k" \|\| player.field_position === "d") && (
107			<section className={"player-detail__statistics-item"}>
108			<div className={"player-detail__statistics-item__number"}>
109			{playerStatistics[0]?.cleanSheets \|\| "0"}
110			</div>
111			<div className={"player-detail__statistics-item__label"}>
112			Cleansheets
113			</div>
114			</section>
115			)}
116			{player.field_position !== "k" && (
117			<section className={"player-detail__statistics-item"}>
118			<div className={"player-detail__statistics-item__number"}>
119			{playerStatistics[0]?.goals \|\| "0"}
120			</div>
121			<div className={"player-detail__statistics-item__label"}>
122			Doelpunten
123			</div>
124			</section>
125			)}
126			<section className={"player-detail__statistics-item"}>
127			<div className={"player-detail__statistics-item__number"}>
128			{playerStatistics[0]?.yellowCards \|\| "0"}
129			</div>
130			<div className={"player-detail__statistics-item__label"}>
131			Gele kaarten
132			</div>
133			</section>
134			<section className={"player-detail__statistics-item"}>
135			<div className={"player-detail__statistics-item__number"}>
136			{playerStatistics[0]?.redCards\|\| "0"}
137			</div>
138			<div className={"player-detail__statistics-item__label"}>
139			Rode kaarten
140			</div>
141			</section>
142			</aside>
143			)
144			}
145			}
146
147			renderPlayerBirthdate = (player) => (
148			<div
149			className={"player-detail__data-item player-detail__data-item--birthdate"}
150			>
151			<span className={"player-detail__data-item__label"}>Geboortedatum</span>
152			<span className={"player-detail__data-item__data"}>
153			{player.field_birth_date \|\| "Onbekend"}
154			</span>
155			</div>
156			)
157			renderPlayerPosition = (player) => (
158			<div
159			className={"player-detail__data-item player-detail__data-item--position"}
160			>
161			<span className={"player-detail__date-item__data"}>
162			{player.field_position && mapPositionCode(player.field_position)}
163			</span>
164			<span className={"player-detail__data-item__label"}>
165			{player.relationships.node__team && (
166			<Link to={player.relationships.node__team[0].path.alias}>
167			{player.relationships.node__team[0].title}
168			</Link>
169			)}
170			</span>
171			</div>
172			)
173			renderPlayerJoinDate = (player) => {
174			const currentlyPlaying = !player.field_date_leave
175			return (
176			<div
177			className={
178			"player-detail__data-item player-detail__data-item--joindate"
179			}
180			>
181			<span className={"player-detail__data-item__label"}>
182			{currentlyPlaying && "Speler bij KCVV sinds"}
183			{!currentlyPlaying && "Speler tussen"}
184			</span>
185			<span className={"player-detail__data-item__data"}>
186			{player.field_join_date \|\| "Onbekend"}
187			{!currentlyPlaying && (
188			<>
189			<span className={"text--regular"}> en </span>{" "}
190			{player.field_date_leave}
191			</>
192			)}
193			</span>
194			</div>
195			)
196			}
197			renderPlayerData = (player) => (
198			<section className={"player-detail__data"}>
199			{this.renderPlayerBirthdate(player)}
200			{this.renderPlayerPosition(player)}
201			{this.renderPlayerJoinDate(player)}
202			</section>
203			)
204			renderPlayerBody = (player) => {
205			const cleanBody =
206			(player.body &&
207			player.body.processed.replaceAll(
208			"/sites/default/",
209			`${process.env.GATSBY_API_DOMAIN}/sites/default/`
210			)) \|\|
211			""
212
213			return (
214			<section className={"player-detail__body"}>
215			<div dangerouslySetInnerHTML={{ __html: cleanBody }} />
216			</section>
217			)
218			}
219			render() {
220			const { player } = this.props
221
222			return (
223			<article className={"player-detail"}>
224			{this.renderPlayerHeader(player)}
225			{this.renderPlayerStats(player)}
226			<div className={"player-break"}></div>
227			{this.renderPlayerData(player)}
228			{this.renderPlayerBody(player)} */}
229			</article>
230			)
231			}
232			}
233
234			// Retrieve endpoint of the logo's api from the site metadata (gatsby-config.js).
235			const query = graphql`
236			query {
237			site {
238			siteMetadata {
239			kcvvPsdApi
240			}
241			}
242			}
243			`
244
245			export default ({ player }) => (
246			<StaticQuery
247			query={query}
248			render={(data) => (
249			<PlayerDetail
250			// Data is the result of our query.
251			config={data}
252			player={player}
253			/>
254			)}
255			/>
256			)
257

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/player-stats ( 57cce1 )

PlayerDetail.renderPlayerStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like